@import "./minxin";
@import "./cssreset";
@import "./color";
header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 1;
    z-index: 999;
    box-shadow: 0 0 8px -1px rgb(21 20 20 / 15%);
    // 头部版心
    .banxin{
        @include banxin();
        height: 70px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        align-content: center;
        padding-right: 60px;
        box-sizing: border-box;

        // 头部左侧
        .haed_lef{
            // flex: 1;
            align-content: center
            img{
                cursor: pointer;
            }
        }

        // 头部右侧
        .haed_rig{
            // flex:1;
            display: flex;
            // font-size: 12px;
            height: $header_hieght;
            line-height: $header_hieght;
            // 右侧三个盒子的间隙
            .rig_home,.rig_list,input{
                margin-left: 65px;
                padding: 0 5px;
            }
            .rig_list{
                height: 84px;
            }
            // 滑动效果
            .rig_home:hover,
            .rig_list:hover{
                color: #26adec;
            }
            // 输入框
            input{
                border: #29b8fb 1px solid;
                border-radius: 20px;
                width: 220px;
                box-sizing: border-box;
                padding: 5px 5px 5px 15px;
            }


            // 右侧购物车、我的中心
            .rig_trolley,.rig_mycenter,.my_hover{
                width: $header_hieght;
                height: $header_hieght;
                background: url(../img/gwc.png);
                background-size: 100% 100%;
                margin: 0 10px;
                cursor: pointer;
            }

            // 我的
            .rig_mycenter,.my_hover{
                background: url(../img/grzx.png);
                background-size: 40px 40px;
                border-radius: 50px;
                position: relative;
                cursor: pointer;
                div{
                    display: none;
                    position: absolute;
                    width: 160px;
                    height: 100px;
                    background-color: white;
                    top: 40px;
                    right: -20px;
                    font-size: 14px;
                    z-index: 9999;
                    span{
                        color: red;
                    }
                    div{
                        width: 50px;
                        height: 20px;
                        position: absolute;
                        right: 5px;
                        font-size: 12px;
                    }
                }
                #my_hover{
                    display: block;
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    // background-color: rgba(0,0,0,0);
                    opacity: 0;
                    top: 0;
                    right: 0;
                    z-index: 9999;
                    cursor: pointer;
                }
            }
            .my_hover:hover div{
                display: block;
            }
        }
    }


    // 二级菜单通栏
    .header_classify{
        border-top: 1px solid rgb(247, 240, 240);
        padding-top: 20px;
        width: 100%;
        height: 117px;
        display: none;
        z-index: 999;
        // 中间内容
        .header_classify_box{
            display: flex;
            justify-content: center;

            // 每个盒子演示
            .item{
                margin: 0 15px;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #848484;
                font-size: 12px;
                // 滑动效果
                &:hover{
                    border-bottom: 3px solid #26adec;
                    margin-top: -3px;
                }

                img{
                    width: 58px;
                    height: 58px;
                }
                span{
                    padding: 5px 0;
                }
            }
        }
        
    }
    // 滑动效果
    .header_classify_display{
        display: block;   
    }
    
}